<template>
  <el-dialog
    title='gift-selection'
    size="large"
    class="login-form "
    width="440px"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :visible="visible"
    :before-close="handleClose">
    <div class="second_block">
      <br>
      <div style="font-size: 20px;text-align: center;color: white;">{{script_1}}</div>
      <br>
<!--      <div style="height: 200px;width: 100%;">-->
<!--        <div  v-for="(item, index) in form.gift_info"-->
<!--              :key="index" style="float: right">-->
<!--          <el-button type="danger" plain style="height: 100px;width: 120px;margin-right: 20px;float: left" @click="giftType(item)">-->
<!--            <img :src="item.image" alt="" width="80px" height="80px">-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
      <div style="display:flex;">
        <div class="tagBox">
          <div v-for="(item,index) in form.gift_info" :key="index" class="tag" :ref="'tag'+index" >
            <el-button type="danger" plain style="height: 100px;width: 120px;margin-right: 20px;float: left" @click="giftType(item)">
              <img :src="item.image" alt="" width="80px" height="80px">
            </el-button>
          </div>
        </div>
      </div>

      <br>
      <div style="text-align: center">
        <el-button type="warning" @click="doBack">PREV STEP</el-button>
        &nbsp;&nbsp;
        <el-button type="primary" @click="doCommentOn">NEXT STEP</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "gift-selection",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
      },
      // 提交状态
      loading: false,

      // 是否是修改
      isUpdate: false,
      script_1:'',
    };
  },

  methods : {
    //关闭页面
    handleClose(done) {
      done();
      this.$emit('handleClose');
    },
    setForm(form)
    {
      this.form = form;
    },
    setBuyerConfig(data)
    {
      this.script_1 = data.gift_select_page_script.script_1;
    },
    //返回上一级
    doBack()
    {
      this.$emit('doBack','');
    },
    //获取礼品类型
    giftType(gift)
    {
      this.form.gift_address_display=gift.address_display;
      this.form.gift_name=gift.name;
      this.form.gift_type_2=gift.gift_type;
      this.form.gift_email=gift.email;
      this.form.gift_image=gift.image;
      if (gift.address_display ===1){
        this.form.gift_type =1;
      }else{
        this.form.gift_type =2;
      }
    },
    //判断评论页面
    doCommentOn()
    {
      //判断是否有选择礼品
      if (!this.form.gift_address_display){
        this.$message({type:'warning',message:'Please select a gift type',offset:160});
      }else{
        this.$emit('getGiftSelection',this.form);
      }

    }
  }
}
</script>

<style scoped>
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width:80px;
  background: #409EFF;
  border: 3px solid #328ce9;
  color: white;
  box-sizing: border-box;
}
.tagBox{
  /*width:300px;*/
  overflow:auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display:flex;
  white-space: nowrap;
  position:relative;/**需要设置在盒子设置相对定位，不然offsetLeft会基于整个页面body */
}
.tagBox::-webkit-scrollbar {
  display: none;
}
.tagBox::-webkit-scrollbar {
  width: 0;
  background: 0 0;
}
.tag{
  width:120px;
  text-align:center;
  margin:7px;
  padding:5px 5px;
  /*background:white;*/
  flex-shrink: 0;
}
.tag.active{
  background:#67C23A;
  color:white;
}
</style>
